<template>
  <view class="basic-flex-horizontal basic-flex-column login">
    <image class="logo" src="/static/logo.png"></image>

    <button v-if="isAgree" class="basic-flex-center login-btn" type="primary" open-type="getPhoneNumber"
            @getphonenumber="handlerGetPhoneNumber">
      手机号快捷登录
    </button>

    <button v-if="!isAgree" class="basic-flex-center login-btn login-btn-none" type="primary">
      手机号快捷登录
    </button>

    <button class="basic-flex-center login-btn login-btn-none" type="primary"
            @click="$utils.jumpPage(`/pages/tabbar/index`, 'reLaunch')">
      暂不登录
    </button>


    <view class="basic-flex-horizontal agreement">
      <image
          class="icon"
          :src="`/static/auth/${isAgree?'icon_1xuan1.png':'icon_1xuan.png'}`"
          @click="isAgree=!isAgree"
      ></image>
      <view class="content">阅读并同意
        <text class="text" @click="$utils.jumpPage('/pages_my/rich_text?type=1')">《用户协议》</text>
        <text class="text" @click="$utils.jumpPage('/pages_my/rich_text?type=2')">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>
<script>


import store from "../../store";
import {wxMobileLogin} from "../../configure/api/my";

export default {
  data() {
    return {
      isAgree: false,
    };
  },
  onShow() {
  },
  methods: {
    async handlerGetPhoneNumber(val) {
      if (!this.isAgree) {
        this.$tip('请阅读并勾选《用户协议》《隐私政策》');
        return
      }

      const {errMsg} = val.detail;

      // 如果用户授权成功
      if (errMsg === 'getPhoneNumber:ok') {
        wx.login({
          success: async (resLogin) => {
            if (resLogin.code) {
              const {iv, encryptedData, code} = val.detail;
              try {
                // 登录操作
                const loginRes = await wxMobileLogin({
                  iv: iv,
                  encryptedData: encryptedData,
                  code: resLogin.code,
                  upNum: store.state.auth.scene || ''
                });

                // 更新用户信息
                const userData = loginRes.data;
                this.$store.commit('auth/SET_USERINFO', userData);

                // 跳转到相应页面
                this.$utils.back()

              } catch (error) {
                console.error('登录失败:', error);
                // 根据需要可以弹出错误提示
                this.$tip('登录失败，请稍后再试');
              }
            } else {
              console.log('登录失败！' + loginRes.errMsg)
            }
          }
        })
      } else if (errMsg.includes('getPhoneNumber:fail')) {
        console.log('授权失败');
        // 这里可以加一些用户提示或重试的逻辑
      }
    }
  },

}
</script>

<style lang="scss" scoped>
.login {

  & > .logo {
    margin: 80px 0px 100px;
    width: 94px;
    height: 94px;
  }

  & > .login-btn-none {
    background: #cdccca !important;
    color: #6d6c6a !important;
  }

  & > .login-btn {
    margin-bottom: 15px;
    width: calc(100% - 30px);
    height: 50px;
    font-weight: 600;
    font-size: 15px;
    color: #FFFFFF;
    background: #FE1C41;
    border-radius: 25px;

    &::after {
      border: none;
    }
  }

  & > .agreement {

    & > .icon {
      width: 14px;
      height: 14px;
      margin-right: 6px;
    }

    & > .content {
      font-weight: 400;
      font-size: 13px;
      color: #333333;

      & > .text {
        color: #FE1C41;
      }

    }

  }

}


</style>